<template>
  <div>

    <!--登录人是管理员-->
    <div v-if="roleType === '1'" class="app-container">
      <!--搜索栏start-->
      <div class="searchMultiplePay">
        <el-select v-model="searchData.xiaoquId" clearable placeholder="小区">
          <el-option
            v-for="item in xiaoquList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="searchData.buildInfo"
          placeholder="门牌信息"
          clearable
          class="input"
          style="margin-left: 5px"
        />
        <el-select v-model="searchData.type" clearable placeholder="账单类型">
          <el-option
            v-for="item in billType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button style="margin-left: 1%" type="primary" icon="el-icon-close" @click="clearContent">清空</el-button>
        <el-button style="margin-left: 1%" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <!--搜索栏end-->

      <!--表格信息start-->
      <div class="tableList">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;margin-top: 10px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="buildInfo"
            label="住址信息"
            align="center"
          />
          <el-table-column
            prop="money"
            label="账单余额"
            align="center"
          />
          <el-table-column
            prop="type"
            label="账单类型"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag :type="handleTypeColor(scope.row.type)">{{ handleType(scope.row.type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="130%"
            align="center"
          >
            <template slot-scope="scope">
              <div style="display: flex;flex-direction: row;justify-content: center">
                <el-input v-model="money[(searchData.pageNumber - 1) * searchData.pageSize + scope.$index+1]" style="width: 100px" placeholder="请输入内容" @input="inputContent((searchData.pageNumber - 1) * searchData.pageSize + scope.$index+1)" />
                <el-button style="margin-left: 10px" size="mini" type="danger" icon="el-icon-edit" :disabled="btDisabled[(searchData.pageNumber - 1) * searchData.pageSize + scope.$index+1] == null ? true : btDisabled[(searchData.pageNumber - 1) * searchData.pageSize + scope.$index+1]" @click="recharge(scope.row.id, money[(searchData.pageNumber - 1) * searchData.pageSize + scope.$index+1], scope.row)">充值</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--表格信息end-->
      <!--分页插件start-->
      <el-pagination
        style="margin-top: 1%;display: flex;justify-content: right"
        background
        layout="prev, pager, next"
        :page-size="size"
        :total="total"
        :current-page.sync="searchData.pageNumber"
        @current-change="currentChange"
      />
      <!--分页插件end-->
    </div>

    <!--登录人是普通用户-->
    <div v-if="roleType === '2' || roleType === '3'">
      <div>
        <el-row style="padding: 14px;width: 100%">
          <el-col v-for="(o, index) in billData" :key="o.id" style="width: 25%">
            <el-card style="margin: 10px 10px" shadow="hover" :body-style="{ padding: '0px' }">
              <div style="display: flex;justify-content: center">
                <img v-if="o.type === 1" src="../../icons/icon/dianfei.png">
                <img v-if="o.type === 2" src="../../icons/icon/shuifei.png">
                <img v-if="o.type === 3" src="../../icons/icon/ranqi.png">
                <img v-if="o.type === 4" src="../../icons/icon/wuye.png">
              </div>
              <div style="padding: 14px;">
                <span v-if="o.type === 1" style="font-weight: bolder;font-size: large">电费</span>
                <span v-if="o.type === 2" style="font-weight: bolder;font-size: large">水费</span>
                <span v-if="o.type === 3" style="font-weight: bolder;font-size: large">燃气费</span>
                <span v-if="o.type === 4" style="font-weight: bolder;font-size: large">物业费</span>
                <div>
                  <div style="margin: 10px auto;text-align: center">
                    <span>{{ o.buildInfo }}</span>
                  </div>
                  <hr>
                  <div style="padding: 0;display: flex;justify-content: space-between">
                    <div style="margin-top: 10px;">
                      <span style="font-weight: bolder;">余额:</span>
                        &nbsp;
                      <span style="color: firebrick;font-weight: bold">{{ o.money }}</span>
                    </div>
                    <div style="width: 80px;margin-left: 70px">
                      <el-input :id="index" v-model="money[index]" @input="inputContent(index)" />
                    </div>
                    <div />
                    <div>
                      <el-button :id="index" type="danger" :disabled="btDisabled[index] == null ? true : btDisabled[index]" @click="recharge(o.id, money[index], o)">去充值</el-button>
                    </div>
                  </div>

                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-html="payHtml" />
  </div>
</template>

<script>
import { getBillPage, getLoginerBill, pay } from '@/api/bill'
import { getList } from '@/api/apartment'

export default {
  data() {
    return {
      inputMoney: [],
      total: null,
      xiaoquList: [],
      billType: [{
        value: 1,
        label: '水费'
      }, {
        value: 2,
        label: '电费'
      }, {
        value: 3,
        label: '燃气费'
      },
      {
        value: 4,
        label: '物业费'
      }], // 账单类型1-水费 2-电费 3-燃气费 4-物业费
      tableData: {}, // 表格数据
      roleType: '',
      money: [], // 充值金额输入框集合
      billData: [], // 账单信息集合
      btDisabled: [],
      searchData: {
        xiaoquId: null,
        type: null,
        buildInfo: null,
        pageSize: 5,
        pageNumber: 1
      }, // 搜索参数
      payHtml: '' // 支付宝界面
    }
  },
  created() {
    this.roleType = window.localStorage.getItem('roleType')
    this.getCurrentLoginerBill()
    this.getAllXiaoQuList()
    this.finalSelect()
  },
  methods: {
    currentChange(val) { // 点击分页栏方法
      this.searchData.pageNumber = val
      this.finalSelect()
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    oninput(str, limit) { // 限制输入框只能输入数字或者小数
      str = str.toString()
      const len1 = str.substr(0, 1)
      const len2 = str.substr(1, 1)
      // 如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 === '0' && len2 !== '.') {
        str = str.substr(1, 1)
      }
      // 第一位不能是.
      if (len1 === '.') {
        str = ''
      }
      // 限制只能输入一个小数点
      if (str.indexOf('.') !== -1) {
        var str_ = str.substr(str.indexOf('.') + 1)
        if (str_.indexOf('.') !== -1) {
          str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)
        }
      }
      // 正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
      }
      if (str === '') {
        return null
      }
      return str
    },
    inputContent(index) { // 输入框为空不可点击支付方法
      if (this.money[index] === '' || this.money[index] == null) {
        this.btDisabled[index] = true
      } else {
        this.btDisabled[index] = false
      }
      const i = this.oninput(this.money[index], 2)
      if (i == null) {
        this.btDisabled[index] = true
      }
      this.$set(this.money, index, i)
    },
    getCurrentLoginerBill() { // 获取当前登录人的所有账单
      getLoginerBill().then(res => {
        this.billData = res.data
      })
    },
    recharge(billId, money, bill) { // 点击去充值
      console.log(billId)
      console.log(money)
      console.log(bill)
      pay(billId, money, bill).then(res => {
        if (res.success) {
          console.log(res)
          this.payHtml = res.data
          this.$nextTick(() => {
            const form = document.getElementsByName('punchout_form')[0]
            form.submit()
          })
        }
      })
    },
    getAllXiaoQuList() {
      getList().then(res => {
        this.xiaoquList = res.data
      })
    },
    clearContent() { // 清空输入框方法
      this.searchData.xiaoquId = null
      this.searchData.buildInfo = null
      this.searchData.type = null
      this.searchData.pageNumber = 1
      this.finalSelect()
    },
    finalSelect() { // 封装后的查询列表方法
      getBillPage(this.searchData).then(res => {
        if (res.data.records) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.size = res.data.size
        } else {
          this.tableData = res.data
        }
      })
    },
    search() {
      this.finalSelect()
    },
    handleType(type) {
      if (type === 1) {
        return '水费'
      }
      if (type === 2) {
        return '电费'
      }
      if (type === 3) {
        return '燃气费'
      }
      if (type === 4) {
        return '物业费'
      }
    },
    handleTypeColor(type) {
      if (type === 1) {
        return 'success'
      }
      if (type === 2) {
        return 'warning'
      }
      if (type === 3) {
        return 'danger'
      }
    }
  }
}
</script>

<style lang="scss">
.searchMultiplePay{
  margin-top: 1%;
  width: 80%;
  .input{
    width: 20%;
    margin-right: 0.5%;
  }
}
.line{
  text-align: center;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

